
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ page import="cv.gzd.robot.pojo.User" %>
<%
    User user= (User) session.getAttribute("USER_SESSION");
%>

<html>
<head>
    <meta charset="UTF-8">
    <title>状态和控制</title>
    <!-- Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${pageContext.request.contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="${pageContext.request.contextPath}/css/dataTables.bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${pageContext.request.contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${pageContext.request.contextPath}/css/font-awesome.min.css" rel="stylesheet"
          type="text/css">
    <link href="${pageContext.request.contextPath}/css/boot-crm.css" rel="stylesheet"
          type="text/css">


    <!--<script-->
    <%--<script type="text/javascript" src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>--%>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var height = $(window).height();
            $("#wrapper").css("height", height);
        }
    </script>
    <%--<script src="${pageContext.request.contextPath}/js/websocket.js"></script>--%>
</head>
<body>
<div id="wrapper" style="background-color:#000000;">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation"
         style="margin-bottom: 0;background-color: #01C9E2">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/index.action">IRIM后端控制管理系统</a>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li>
                <ul><%=user.getRealname()%><%=user.getAuthorization()%>,你好!</ul>
            </li>
            <li class="dropdown"><a class="dropdown-toggle"
                                    data-toggle="dropdown" href="#"> <i class="fa fa-user fa-fw"></i>
                <i class="fa fa-caret-down"></i>
            </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#" data-toggle="modal" data-target="#PswdSaveDialog"><i
                            class="fa fa-user fa-fw"></i> 修改密码</a></li>
                    <li class="divider"></li>
                    <li><a href="/logout"><i class="fa fa-sign-out fa-fw"></i>
                        退出登录</a></li>
                </ul> <!-- /.dropdown-User --></li>
        </ul>

    </nav>
    <div class="navdiv collapse navbar-collapse">
        <ul class="nav navbar-nav ">
            <li class="">
                <div><a href="/index.action"><span class="icon fa fa-gamepad"></span>状态和控制</a></div>
            </li>
            <li class="">
                <div><a href="/log/list.action"><span class="icon fa fa-wpforms"></span> 运行日志</a></div>
            </li>
            <li class="">
                <div><a href="/dev/list.action"><span class="icon fa fa-desktop"></span>设备管理</a></div>
            </li>
            <li class="">
                <div><a href="/user/list.action"><span class="icon fa fa-users"></span>用户管理</a></div>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <!--<div class="col-lg-4"></div>-->
            <div class="panel panel-default page-wapper aside col-lg-6">
                <h3 style="color:#02E3FF;text-align: center">实时状态</h3>
                <div class="col-lg-3">
                    <span id="signalIcon" class="icon fa fa-ban"></span>
                    <h5 id="signal">断线</h5>
                </div>
                <div class="col-lg-3">
                    <span id="batteryIcon" class="icon fa fa-battery-empty"></span>
                    <h5 id="battery">电量:</h5>
                </div>
                <div class="col-lg-3">
                    <span class="icon fa fa-tachometer"></span>
                    <h5 id="speed">速度:</h5>
                </div>
            </div>
            <div class="panel panel-default page-wapper section col-lg-4">
                <span class="btn icon fa fa-chevron-circle-up forward"></span>
                <span class="btn icon fa fa-chevron-circle-left forleft"></span>
                <span class="btn icon fa fa-chevron-circle-right forright"></span>
                <span class="btn icon fa fa-chevron-circle-down backward"></span>
                <span class="btn icon fa fa-stop-circle forstop"></span>
            </div>
            <!--<div class="col-lg-4"></div>-->
        </div>
    </div>

    <div class="panel panel-primary" id="online">
        <div class="panel-heading">
            <h5 class="panel-title">当前在线的设备</h5>
        </div>
        <div class="panel-body">
            <div class="btn-group" id="devs"></div>
        </div>
    </div>

    <%--修改密码--%>
    <div class="modal fade" id="PswdSaveDialog" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="SavePswd">修改密码</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="save_Pswd_form">
                        <input type="hidden" id="edit_Pswd_Uid" name="uid" value="<%=user.getUid()%>"/>
                        <div class="form-group">
                            <label for="edit_Pswd_new" class="col-sm-2 control-label">新密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="edit_Pswd_new" placeholder="新密码"
                                       name="password">
                            </div>
                            <label for="edit_Pswd_again" class="col-sm-2 control-label">再次输入新密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="edit_Pswd_again" placeholder="再次输入新密码"
                                       name="pwsd">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updatePswd()">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    <!--表格-->
    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${pageContext.request.contextPath}/js/metisMenu.min.js"></script>

    <%--DataTables JavaScript--%>

    <script src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/dataTables.bootstrap.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${pageContext.request.contextPath}/js/sb-admin-2.js"></script>
<script>
    function setrobotId(id){

        window.location.href="/indexInfo.action?id="+id.innerText;
    }
</script>

    <!--底部-->
</div>
<script>
    function updatePswd() {
        $.post("${pageContext.request.contextPath}/user/updatepswd.action", $("#save_Pswd_form").serialize(), function (data) {
            if (data.code==801){
                alert("修改密码成功！");
                window.location.reload();
            }
            if(data.code==802){
                alert("两次密码不一致！");
                window.location.reload();
            }
        });
    }

    $.post("onlinedevs",function (data) {

        for(var i=0;i<data.length;i++){
            var id=data[i];
            $("#devs").append('<button type="button" onclick="setrobotId(this)" class="btn btn-default">'+data[i]+'</button>')

        }
    });

        $(document).ready(function(){
        var websocket;
        if ('WebSocket' in window) {
            <c:if test="${rid!=null}">
                websocket = new WebSocket("ws://10.24.2.94:8080/ws?rid="+${rid});
            </c:if>

        } else if ('MozWebSocket' in window) {
            <c:if test="${rid!=null}">
            websocket = new MozWebSocket("ws://10.24.2.94:8080/ws"+${rid});
            </c:if>
        } else {
            <c:if test="${rid!=null}">
            websocket = new SockJS("http://10.24.2.94:8080/ws/sockjs"+${rid});
            </c:if>
        }


        websocket.onopen=function (ev) {
            $("#signalIcon").removeClass();
            $("#signalIcon").addClass("icon fa fa-signal");
            $("#signal").html("在线");

        };

        websocket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            var power=data.robotState.power;
            var speed=(data.robotState.speed).toFixed(2);
            $("#battery").html("电量:"+power);
            $("#speed").html("速度:"+speed);
            var power=Math.ceil(power/10);
            switch (power) {
                case 10:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-full");
                    break;
                case 9:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-full");
                    break;
                case 8:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-three-quarters");
                    break;
                case 7:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-three-quarters");
                    break;
                case 6:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-three-quarters");
                    break;
                case 5:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-half");
                    break;
                case 4:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-half");
                    break;
                case 3:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-quarter");
                    break;
                case 2:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-quarter");
                    break;
                case 1:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-empty");
                    break;
                default:
                    $("#batteryIcon").removeClass();
                    $("#batteryIcon").addClass("icon fa fa-battery-empty");
                    break;
            }
        };
            $(".forward").click(function () {
               $.post("robotInfo.action",
                   {"rid":${rid}},function (date) {
                        var data={};
                        var robotState={};
                        robotState["robotID"]=date;
                        robotState["moveCode"]=9001;
                          data["robotState"]=robotState ;
                        websocket.send(JSON.stringify(data));
                });
            });
        $(".forleft").click(function () {
            $.post("robotInfo.action",
                {"rid":${rid}},function (date) {
                    var data={};
                    var robotState={};
                    robotState["robotID"]=date;
                    robotState["moveCode"]=9002;
                    data["robotState"]=robotState ;
                    websocket.send(JSON.stringify(data));
                });
        });
        $(".forright").click(function () {
            $.post("robotInfo.action",
                {"rid":${rid}},function (date) {
                    var data={};
                    var robotState={};
                    robotState["robotID"]=date;
                    robotState["moveCode"]=9003;
                    data["robotState"]=robotState ;
                    websocket.send(JSON.stringify(data));
                });
        });
        $(".backward").click(function () {
            $.post("robotInfo.action",
                {"rid":${rid}},function (date) {
                    var data={};
                    var robotState={};
                    robotState["robotID"]=date;
                    robotState["moveCode"]=9004;
                    data["robotState"]=robotState ;
                    websocket.send(JSON.stringify(data));
                });
        });
        $(".forstop").click(function () {
            $.post("robotInfo.action",
                {"rid":${rid}},function (date) {
                    var data={};
                    var robotState={};
                    robotState["robotID"]=date;
                    robotState["moveCode"]=9005;
                    data["robotState"]=robotState ;
                    websocket.send(JSON.stringify(data));
                });
        });
        websocket.onclose = onClose;
    });
</script>
</body>

</html>